<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const options = reactive([
    {
      value: 'a1',
      label: 'a1',
    },
    {
      value: 'a2',
      label: 'a2',
    },
  ]);

  const formState = reactive({
    capacity: '',
    area: '',
    accumulatedGeneration: '',
    accumulatedGenerationIncome: '',
    selfUseConsumption: '',
    selfUseConsumptionIncome: '',
    onGridEnergy: '',
    onGridEnergyIncome: '',
    intensity: '',
    temperature: '',
  });

  const dayOption = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
        {
          data: [110, 220, 140, 70, 80, 150, 120],
          type: 'bar',
        },
      ],
    };
  });

  const monthOption = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
        {
          data: [110, 220, 140, 70, 80, 150, 120],
          type: 'bar',
        },
      ],
    };
  });

  const yearOption = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
        {
          data: [110, 220, 140, 70, 80, 150, 120],
          type: 'bar',
        },
      ],
    };
  });

  const historyOption = computed(() => {
    return {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
        {
          data: [110, 220, 140, 70, 80, 150, 120],
          type: 'bar',
        },
      ],
    };
  });

  const columns = [
    { title: '逆变器名称', dataIndex: 'name', key: 'name', width: 120, align: 'center' },
    { title: '累计发电量', dataIndex: 'powerGeneration', key: 'powerGeneration', align: 'center' },
    { title: '有功功率', dataIndex: 'activePower', key: 'activePower', align: 'center' },
    { title: '电压', dataIndex: 'voltage', key: 'voltage', align: 'center' },
    { title: '电流', dataIndex: 'current', key: 'current', align: 'center' },
    { title: '频率', dataIndex: 'frequency', key: 'frequency', align: 'center' },
    { title: '功率因数', dataIndex: 'factor', key: 'factor', align: 'center' },
  ];

  const tableData = ref([
    {
      name: '逆变器1',
      powerGeneration: '',
      activePower: '',
      voltage: '',
      current: '',
      frequency: '',
      factor: '',
    },
    {
      name: '逆变器2',
      powerGeneration: '',
      activePower: '',
      voltage: '',
      current: '',
      frequency: '',
      factor: '',
    },
  ]);
</script>

<template>
  <div class="container">
    <div class="table">
      <div class="left">
        <a-card title="光伏电站概览">
          <template #extra>
            <div class="condition">
              <span class="title">选择光伏电站:</span>
              <a-select style="width: 180px" allowClear placeholder="请选择" :options="options"> </a-select></div
          ></template>

          <div class="info">
            <div class="line">
              <span class="title">电站装机容量:</span>
              <a-input v-model:value="formState.capacity" />
            </div>
            <div class="line">
              <span class="title">光伏面积:</span>
              <a-input v-model:value="formState.area" />
            </div>
            <div class="line">
              <span class="title">累计发电量:</span>
              <a-input v-model:value="formState.accumulatedGeneration" />
              <span>(累计收益:</span> <a-input v-model:value="formState.accumulatedGenerationIncome" />)
            </div>
            <div class="line">
              <span class="title">自用电量:</span>
              <a-input v-model:value="formState.selfUseConsumption" />
              <span>(累计收益:</span> <a-input v-model:value="formState.selfUseConsumptionIncome" />)
            </div>
            <div class="line">
              <span class="title">上网电量:</span>
              <a-input v-model:value="formState.onGridEnergy" />
              <span>(累计收益:</span> <a-input v-model:value="formState.onGridEnergyIncome" />)
            </div>
            <div class="line">
              <span>实时天气信息:</span>
              <span>阳光强度:</span>
              <a-input v-model:value="formState.intensity" />
              <span>光伏板温度:</span>
              <a-input v-model:value="formState.temperature" />
            </div>
          </div>
        </a-card>

        <a-card title="各逆变器实时数据监控">
          <a-table :columns="columns" :data-source="tableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="['powerGeneration', 'activePower', 'voltage', 'current', 'frequency', 'factor'].includes(column.dataIndex)">
                <div>
                  <a-input v-model:value="record.value" style="margin: -5px 0" />
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>

      <div class="right">
        <a-card title="光伏电站发电趋势图">
          <div class="charts">
            <span>日发电趋势</span>
            <div class="chart">
              <eChart :option="dayOption" name="dayOption" />
            </div>
          </div>
          <div class="charts">
            <span>月发电趋势</span>
            <div class="chart">
              <eChart :option="monthOption" name="monthOption" />
            </div>
          </div>
          <div class="charts">
            <span>年发电趋势</span>
            <div class="chart">
              <eChart :option="yearOption" name="yearOption" />
            </div>
          </div>
          <div class="charts">
            <span>历史发电记录</span>
            <div class="chart">
              <eChart :option="historyOption" name="historyOption" />
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .condition {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }
  }

  .table {
    display: flex;
  }

  .left {
    width: 50%;
    margin-right: 10px;
    .ant-card {
      width: 100%;
      min-height: 608px;
      margin-bottom: 10px;

      &:nth-of-type(2) {
        min-height: 1000px;
      }
    }

    .line {
      display: flex;
      align-items: center;
      margin: 20px 0;
      span {
        margin: 0 20px;
      }
      .ant-input {
        width: 150px;
      }
    }
    .title {
      width: 90px;
    }
  }

  .right {
    width: 50%;
    .ant-card {
      width: 100%;
      min-height: 400px;
      margin-bottom: 10px;
    }
    .charts {
      span {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .chart {
      width: 100%;
      height: 350px;
    }
  }
</style>
